<template>
  <div class="market">
    <div class="header">
      <div class="back" @click="handleBack">
        <div class="home-icon"></div>
      </div>
      <div class="title">Market</div>
    </div>
    <div class="scrollable-content">
      <div class="symbol">
        {{ symbolInfo.symbolCode }}
        <i class="filter-icon" @click="show = true"></i>
        <div class="spot-order">Spot Orders &gt;</div>
      </div>

      <div class="price-info">
        <div class="left-section">
          <div class="price" :class="priceChangeClass">
            {{ symbolInfo&&symbolInfo.tickers&&symbolInfo.tickers.close.toFixed(2) }}
          </div>
          <div class="change" :class="{'up':symbolInfo.tickers.close>=symbolInfo.tickers.open,'down':symbolInfo.tickers.close<symbolInfo.tickers.open}" v-if="symbolInfo&&symbolInfo.tickers&&symbolInfo.tickers.close&&symbolInfo.tickers.open">
            {{ ((symbolInfo.tickers.close - symbolInfo.tickers.open)/symbolInfo.tickers.open*100).toFixed(2) }}%
          </div>
        </div>
        <div class="right-section">
          <div class="info-column">
            <div class="info-row">
              <div class="info-label">24H High</div>
              <div class="info-value">{{ symbolInfo&&symbolInfo.tickers&&symbolInfo.tickers.high }}</div>
            </div>
            <div class="info-row">
              <div class="info-label">24H Low</div>
              <div class="info-value">{{ symbolInfo&&symbolInfo.tickers&&symbolInfo.tickers.low }}</div>
            </div>
          </div>
          <div class="info-column">
            <div class="info-row">
              <div class="info-label">24H Volume</div>
              <div class="info-value" style="margin-left: 20px" v-if="symbolInfo&&symbolInfo.tickers&&symbolInfo.tickers.vol">
                {{ symbolInfo.tickers.vol.toFixed(2) }}M
              </div>
            </div>
            <div class="info-row">
              <div class="info-label">24H Amount</div>
              <div class="info-value" style="margin-left: 20px" v-if="symbolInfo&&symbolInfo.tickers&&symbolInfo.tickers.amount">
                {{ symbolInfo.tickers.amount.toFixed(4) }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="time-selector">
        <div
          v-for="interval in timeIntervals"
          :key="interval"
          class="time-item"
          :class="{ active: activeInterval === interval }"
          @click="changeInterval(interval)"
        >
          {{ interval }}
        </div>
      </div>

      <div class="chart-container">
        <div class="price-labels">
          <div class="price-label">
            <span class="label">O</span>
            <span class="value">{{ currentOpen }}</span>
          </div>
          <div class="price-label">
            <span class="label">H</span>
            <span class="value">{{ currentHigh }}</span>
          </div>
          <div class="price-label">
            <span class="label">L</span>
            <span class="value">{{ currentLow }}</span>
          </div>
          <div class="price-label">
            <span class="label">C</span>
            <span class="value">{{ currentClose }}</span>
          </div>
        </div>

        <div class="chart-area">
          <div ref="chartContainer" style="width: 100%; height: 300px"></div>
        </div>
      </div>

      <div class="trade-history">
        <div class="trade-header">
          <div class="time">Time</div>
          <div class="direction">Direction</div>
          <div class="price">Price</div>
          <div class="amount" style="color: white">Amount</div>
        </div>
        <div class="trade-list">
          <div v-for="(trade, index) in trades" :key="index" class="trade-item">
            <div class="time">{{ formatTime1(trade.id) }}</div>
            <div
              class="direction"
              :class="{
                buy: trade.price >= trade.open,
                sell: trade.price < trade.open,
              }"
            >
              {{ trade.price >= trade.open ? "Buy" : "Sell" }}
            </div>
            <div class="price">{{ trade.price }}</div>
            <div class="amount">{{ trade.amount }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="trade-buttons">
      <div class="button-container">
        <button class="buy-button" @click="buy('up')">Buy Up</button>
        <button class="sell-button" @click="buy('down')">Buy Down</button>
      </div>
    </div>
    <van-popup
      v-model:show="show"
      position="left"
      :style="{ width: '60%', height: '100%', background: 'rgba(0, 0, 0, .5)' }"
    >
      <div class="symbol-content">
        <div class="symbol-header">
          <span>Spot</span>
          <div class="close-btn" @click="show = false">×</div>
        </div>
        <div class="symbol-list">
          <div
            class="symbol-item"
            @click="selectSymbol(item)"
            v-for="(item, index) in symbolList"
            :key="item.id"
          >
            <span class="symbol-name">{{ item.symbolCode }}</span>
            <span  v-if="item.tickers&&(item.tickers.close>=item.tickers.open)" class="symbol-price up">{{ item.tickers&&item.tickers.close&&item.tickers.close.toFixed(4) }}</span>
            <span v-if="item.tickers&&(item.tickers.close<item.tickers.open)"  class="symbol-price down">{{ item.tickers&&item.tickers.close&&item.tickers.close.toFixed(4) }}</span>
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup
      v-model:show="showBuy"
      position="bottom"
      :style="{  background: 'rgba(0, 0, 0, .5)' }"
    >
      <div class="trade-content">
        <div class="product-info">
          <div class="info-grid">
            <div class="info-item">
              <span class="label">产品名称</span
              ><span class="value">{{ symbolInfo.symbolCode }}</span>
            </div>
            <div class="info-item">
              <span class="label">方向</span>
              <span v-if="buyStatus=='up'" class="value direction-up">买涨</span>
              <span v-if="buyStatus=='down'" class="value direction-down">买跌</span>
            </div>
            <div class="info-item">
              <span class="label">当前价格</span
              ><span class="value">{{ symbolInfo.tickers.close.toFixed(2) }}</span>
            </div>
            <div class="info-item">
              <span class="label">手续费</span><span class="value">0.00%</span>
            </div>
          </div>
        </div>
        <div class="trade-time">
          <div class="time-label">
            交易时间 <i class="info-icon"><!----></i>
          </div>
        </div>
        <div class="time-options">
          <div class="time-option" :class="{'active':activeIndex==index}" @click="changeActive(index)" v-for="(item,index) in timeOptionList" :key="index">
            <div class="time">{{ item.time }}</div>
            <div class="ratio">Ratio:{{ item.ratio }}</div>
          </div>
        </div>
        <div class="balance-info">
          <div class="available">
            可用余额: {{ unserInfo.availableBalance }}
            <img
              src="https://coinlist000.s3.ap-east-1.amazonaws.com/INR.png"
              class="currency-icon"
              alt="INR"
            />
          </div>
          <div class="predicted">预计收益: 0</div>
        </div>
        <div class="amount-input">
          <div class="input-wrapper">
            <input type="number" v-model="amountOrder" placeholder="0" class="trade-input" />
            <div class="min-amount">最低限购 500</div>
          </div>
        </div>
        <button class="confirm-btn" @click="submitOrder">订单确认</button>
      </div>
    </van-popup>
  </div>
</template>

<script setup name="Market">
import { ref, computed, watch, onUnmounted, reactive } from "vue";
import {  Toast } from "vant";
import * as echarts from "echarts";
import { format } from "date-fns";
import { MarketApi } from "@/api/market.ts";
import { UserApi } from "@/api/user.api.ts";
import { useRouter } from "vue-router";
const router = useRouter();
import { HomeApi } from "@/api/home.ts";
import { ro } from "date-fns/locale";
const handleBack = () => {
  router.push("/home"); // 替换为您的主页路径
};
const show = ref(false);
const showBuy = ref(false);
const buyStatus = ref('');
const buy = (ref) => {
  showBuy.value = true;
  buyStatus.value = ref;
  getInfo();
}
const activeIndex = ref(0);
const timeOptionList = [
  { time: '180S', ratio: '10%',orderTime:180,ratioOrder:0.1 },
  { time: '150S', ratio: '20%',orderTime:150 ,ratioOrder:0.2},
  { time: '120S', ratio: '40%',orderTime:120 ,ratioOrder:0.4},
  { time: '60S', ratio: '60%',orderTime:60 ,ratioOrder:0.6},
];
const changeActive = (index) => {
  activeIndex.value = index;
}
const amountOrder = ref('');
const submitOrder = () => {
  if(!amountOrder.value){
    Toast('please enter valid amount')
    return;
  }
  if(unserInfo.value.availableBalance<500){
    Toast('Insufficient Balance!')
    return;
  }
  if(amountOrder.value<500){
    Toast('Minimum order amount is 500!');
    return;
  }
  if(!unserInfo.value.paymentPassword){
    Toast('Please set payment password!');
    router.push('/fundPassword');
    return;
  }
  MarketApi.sureOrder({
    symbol:symbolInfo.value.symbolCode,
    price:symbolInfo.value.tickers.close,
    amount:amountOrder.value,
    direction:buyStatus.value=='up'?'UP':'DOWN',
    profitRatio:timeOptionList[activeIndex.value].ratioOrder,
    countdown:timeOptionList[activeIndex.value].orderTime,
    paymentPassword:unserInfo.value.paymentPassword
  }).then(res=>{
    if(res.code==200){
      Toast('Order placed successfully!')
      showBuy.value = false;
      router.push('/order');
    }else{
      Toast(res.msg)
    }
  })


}
const symbolInfo = ref({});
// Chart data
const klineData = ref([]);

// Trade history data
const trades = ref([]);

const unserInfo = ref({});
const getInfo = () => {
  UserApi.wallet().then(res => {
    if (res.code === 200) {
      // Handle wallet data here
      unserInfo.value = res.data;
    }
  });
};
const getTenData = () => {
  console.log(symbolInfo,symbolInfo.value,111)
  MarketApi.getKline({
    symbol: symbolInfo.value.symbolCode,
    period: "5min",
    size: "10",
    index:new Date().getTime()
  }).then((res) => {
    if (res.code === 200) {
      trades.value = res.data.map((item) => ({
        id: item.id,
        open: item.open.toFixed(2),
        price: item.close.toFixed(2),
        amount: item.amount.toFixed(4),
      }));
    }
  });
};

const getTwoHanData = (str) => {
  MarketApi.getKline({
    symbol: symbolInfo.value.symbolCode,
    period: str?str:"5min",
    size: "200",
    index:new Date().getTime()
  }).then((res) => {
    if (res.code == 200) {
      klineData.value = res.data;
      // klineData.value.forEach((item) => {
      //   if(!item.id){
      //     item.id = 1745114700;
      //   }
      // });
      initChart();
      console.log(klineData.value, 101010);
    }
  });
};
const symbolList = ref([]);
const getConCoinList = () => {
  return  HomeApi.getSymbolConfig().then((res) => {
    if (res.code == 200) {
      symbolList.value = res.data;
      symbolInfo.value = res.data[0];
    }
  });
};

const init = async () => {
  await getConCoinList();
  console.log(symbolInfo.value,101010)
  getTenData();
  getInfo();
  getTwoHanData();
};

const selectSymbol = (item) => {
  symbolInfo.value = item;
  show.value = false;
  getTenData();
  getTwoHanData();
};
// Props (if needed)
// const props = defineProps({})

// UI state
const activeInterval = ref("5M");
const timeIntervals = ref(["1M", "5M", "30M", "1H", "4H", "1D", "60S"]);
const chartContainer = ref(null);
let chartInstance = null;


const currentOpen = computed(
  () => klineData.value.length?klineData.value[0]?.open?.toFixed(2) :'0.00'
);
const currentHigh = computed(
  () => klineData.value.length?Math.max(...klineData.value.map(item => item.high)).toFixed(2):'0.00'
);
const currentLow = computed(
  () => klineData.value.length?Math.min(...klineData.value.map(item => item.low)).toFixed(2):'0.00'
);
const currentClose = computed(
  () => klineData.value.length?klineData.value[klineData.value.length-1]?.close?.toFixed(2) :"0.00"
);

// Methods
const formatTime = (timestamp) => {
  const date = new Date(timestamp * 1000);
  return format(date, "HH:mm");
};
const formatTime1 = (timestamp) => {
  const date = new Date(timestamp * 1000);
  return format(date, "HH:mm:ss");
};
const changeInterval = (interval) => {
  activeInterval.value = interval;
  switch (interval) {
    case "1M":
      getTwoHanData('1min');
      break;
    case "5M":
      getTwoHanData('5min');
      break;
    case "30M":
      getTwoHanData('30min');
      break;
    case "1H":
      getTwoHanData('60min');
      break;
    case "4H":
      getTwoHanData('4hour');
      break;
    case "1D":
      getTwoHanData('1D');
      break;
    case "60S":
      getTwoHanData('5min');
      break;
    default:
      break; 
  }
  // Here you would typically fetch new data based on the interval
  // For now, we'll just update the active interval
};

const initChart = () => {
  if (!chartContainer.value) return;

  chartInstance = echarts.init(chartContainer.value);

  // Prepare data
  const dates = klineData.value.map((item) => formatTime(item.id)).reverse();
  const candleData = klineData.value
    .map((item) => [item.open, item.close, item.low, item.high])
    .reverse();
  const volData = klineData.value.map((item) => item.vol).reverse();

  // Calculate MA
  const calculateMA = (dayCount) => {
    const result = [];
    for (let i = 0, len = candleData.length; i < len; i++) {
      if (i < dayCount - 1) {
        result.push("-");
        continue;
      }
      let sum = 0;
      for (let j = 0; j < dayCount; j++) {
        sum += candleData[i - j][1]; // Closing price
      }
      result.push(+(sum / dayCount).toFixed(2));
    }
    return result;
  };

  const ma5 = calculateMA(5);
  const ma20 = calculateMA(20);

  // 初始时使用最后一条数据
  let lastVisibleClose = klineData.value[0]?.close || 0;
  let lastVisibleVol = klineData.value[0]?.vol || 0;

  const option = {
    backgroundColor: "transparent",
    animation: false,
    tooltip: {
      trigger: "axis",
      show: false,
      axisPointer: {
        type: "cross",
      },
    },
    grid: [
      {
        left: "3%",
        right: "15%",
        height: "60%",
        top: "10%",
      },
      {
        left: "3%",
        right: "15%",
        height: "15%",
        top: "75%",
      },
    ],
    xAxis: [
      {
        type: "category",
        data: dates,
        scale: true,
        boundaryGap: false,
        axisLabel: {
          color: "#8392A5",
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      {
        type: "category",
        gridIndex: 1,
        data: dates,
        axisLabel: {
          color: "#666666",
          fontSize: 10,
        },
        axisTick: { show: false },
      },
    ],
    yAxis: [
      {
        scale: true,
        position: "right",
        axisLabel: {
          color: "#666666",
          fontSize: 12,
          fontFamily: "Arial, sans-serif",
        },
        splitLine: {
          lineStyle: {
            color: "rgba(131, 146, 165, 0.1)",
          },
        },
      },
      {
        gridIndex: 1,
        position: "right",
        axisLabel: {
          color: "#666666",
          fontSize: 12,
          show: false,
        },
        splitLine: { show: false },
      },
    ],
    dataZoom: [
      {
        type: "inside",
        xAxisIndex: [0, 1],
        start: 70,
        end: 100,
        zoomOnMouseWheel: true,
        moveOnMouseMove: true,
        moveOnMouseWheel: false,
      },
    ],
    series: [
      {
        name: "K线",
        type: "candlestick",
        data: candleData,
        itemStyle: {
          color: "#26A69A", // Down color
          color0: "#EF5350", // Up color
          borderColor: "#26A69A",
          borderColor0: "#EF5350",
        },
        markLine: {
          silent: true,
          symbol: "none",
          lineStyle: {
            color: "#FF3B30",
            type: "dashed",
            width: 0.5,
          },
          data: [
            {
              yAxis: lastVisibleClose,
              label: {
                show: true,
                position: "end", // Changed from 'start' to 'end' to show on right
                fontSize: 10,
                color: "#ffffff",
                backgroundColor:
                  lastVisibleClose >=
                  (candleData[candleData.length - 1]?.[0] || 0)
                    ? "#EF5350"
                    : "#26A69A",
                padding: [2, 4],
                borderRadius: 2,
              },
              lineStyle: {
                color:
                  lastVisibleClose >=
                  (candleData[candleData.length - 1]?.[0] || 0)
                    ? "#EF5350"
                    : "#26A69A",
              },
            },
          ],
        },
      },
      {
        name: "MA5",
        type: "line",
        data: ma5,
        smooth: true,
        lineStyle: {
          width: 1,
          color: "#f5c079",
        },
        symbol: "none",
      },
      {
        name: "MA20",
        type: "line",
        data: ma20,
        smooth: true,
        lineStyle: {
          width: 1,
          color: "#8d8e95",
        },
        symbol: "none",
      },
      {
        name: "成交量",
        type: "bar",
        xAxisIndex: 1,
        yAxisIndex: 1,
        data: volData.map((vol, index) => {
          return {
            value: vol,
            itemStyle: {
              color:
                candleData[index][1] >= candleData[index][0]
                  ? "#EF5350"
                  : "#26A69A",
            },
          };
        }),
        barWidth: "60%",
        markLine: {
          silent: true,
          symbol: "none",
          lineStyle: {
            color: "#FF3B30",
            type: "dashed",
            width: 0.5,
          },
          data: [
            {
              yAxis: (lastVisibleVol / 1000000).toFixed(2),
              label: {
                show: true,
                position: "end", // Changed from 'start' to 'end' to show on right
                fontSize: 10,
                color: "#ffffff",
                backgroundColor:
                  lastVisibleClose >=
                  (candleData[candleData.length - 1]?.[0] || 0)
                    ? "#EF5350"
                    : "#26A69A",
                padding: [2, 4],
                borderRadius: 2,
              },
              lineStyle: {
                color:
                  lastVisibleClose >=
                  (candleData[candleData.length - 1]?.[0] || 0)
                    ? "#EF5350"
                    : "#26A69A",
              },
            },
          ],
        },
      },
    ],
  };

  chartInstance.setOption(option);

  // 监听dataZoom事件
  chartInstance.on("dataZoom", function (params) {
    // 获取当前可见区域的数据范围
    const option = chartInstance.getOption();
    const dataZoom = option.dataZoom[0];

    // 计算当前可见区域的最后一条数据的索引
    const startValue = dataZoom.startValue || 0;
    const endValue = dataZoom.endValue || candleData.length - 1;
    const lastVisibleIndex = Math.min(
      Math.floor(endValue),
      candleData.length - 1
    );

    // 更新最后一条可见数据的收盘价和成交量
    lastVisibleClose = candleData[lastVisibleIndex][1];
    lastVisibleVol = volData[lastVisibleIndex];

    // 更新markLine
    chartInstance.setOption({
      series: [
        {
          markLine: {
            data: [
              {
                yAxis: lastVisibleClose,
                label: {
                  show: true,
                  position: "end",
                  formatter: lastVisibleClose.toFixed(2),
                  fontSize: 10,
                  color: "#ffffff",
                  backgroundColor:
                    lastVisibleClose >= candleData[lastVisibleIndex][0]
                      ? "#EF5350"
                      : "#26A69A",
                  padding: [2, 4],
                  borderRadius: 2,
                },
                lineStyle: {
                  color:
                    lastVisibleClose >= candleData[lastVisibleIndex][0]
                      ? "#EF5350"
                      : "#26A69A",
                },
              },
            ],
          },
        },
        {}, // MA5保持不变
        {}, // MA20保持不变
        {
          markLine: {
            data: [
              {
                yAxis: lastVisibleVol,
                label: {
                  show: true,
                  position: "end",
                  formatter: (lastVisibleVol / 1000000).toFixed(2),
                  fontSize: 10,
                  color: "#ffffff",
                  backgroundColor:
                    lastVisibleClose >= candleData[lastVisibleIndex][0]
                      ? "#EF5350"
                      : "#26A69A",
                  padding: [2, 4],
                  borderRadius: 2,
                },
                lineStyle: {
                  color:
                    lastVisibleClose >= candleData[lastVisibleIndex][0]
                      ? "#EF5350"
                      : "#26A69A",
                },
              },
            ],
          },
        },
      ],
    });
  });
};
const timer = ref(null);
// const timer2 = ref(null);
// Lifecycle hooks
init();
// timer2.value = setInterval(() => {
//   getConCoinList();
// }, 1000);
timer.value = setInterval(() => {
  getTenData;
}, 10000);

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
  if (timer.value) {
    clearInterval(timer.value);
  }
});
// Watch for data changes
watch(
  klineData,
  () => {
    if (chartInstance) {
      initChart();
    }
  },
  { deep: true }
);
</script>

<style scoped>
.market {
  height: 100vh;
  background: #1a1c2a;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1c2a;
}

.back {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.home-icon {
  width: 18px;
  height: 18px;
  background: white;
  mask: url(../assets/home.svg) center / contain no-repeat;
  -webkit-mask: url(../assets/home.svg) center / contain no-repeat;
}

.title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.scrollable-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(38, 166, 154, 0.2) transparent;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 80px;
}

.symbol {
  padding: 15px 15px 0;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px;
}

.filter-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #666;
  mask: url(../assets/fit.svg) center / contain no-repeat;
  -webkit-mask: url(../assets/fit.svg) center / contain no-repeat;
}

.spot-order {
  margin-left: auto;
  font-size: 12px;
  color: #666;
  cursor: pointer;
}

.price-info {
  padding: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
}

.left-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 110px;
}

.price {
  font-size: 16px;
  color: #fff;
  font-weight: 700;
}

.price.up {
  color: #4caf50;
}

.price.down {
  color: #ff3b30;
}

.change {
  font-size: 14px;
}

.change.up {
  color: #4caf50;
}

.change.down {
  color: #ff3b30;
}

.right-section {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  margin-left: 0;
}

.info-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-row {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 0;
}

.info-label {
  font-size: 11px;
  color: #999;
  width: 40px;
  text-align: left;
  margin-right: 14px;
}

.info-value {
  font-size: 12px;
}

.time-selector {
  display: flex;
  padding: 10px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.time-item {
  flex: 0 0 auto;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  color: #999;
  white-space: nowrap;
  margin-right: 15px;
}

.time-item.active {
  color: #409eff;
}

.chart-container {
  margin: 15px;
  background: #1a1c2a;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  height: 500px; /* 增加高度以容纳两个图表 */
  -webkit-user-select: none;
  user-select: none;
}

.price-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.price-label {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.label {
  margin-right: 5px;
  color: #8392a5;
}

.value {
  color: white;
}

.chart-area {
  height: 300px;
  margin-bottom: 15px;
}

.trade-history {
  margin: 15px 15px 0;
  background: #1a1c2a;
  border-top: 1px solid #26a69a;
}

.trade-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 8px 0;
  color: #666;
  font-size: 12px;
  text-align: center;
}

.trade-header > div {
  font-size: 12px;
  font-weight: 400;
}
.time {
  font-size: 16px;
  margin-bottom: 5px;
  color: #fff;
}
.trade-list {
  height: auto;
  margin-bottom: 60px;
}

.trade-item {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 6px 0;
  font-size: 12px;
  align-items: center;
}
.trade-item .time {
  font-size: 12px;
  text-align: center;
  font-family: monospace;
  line-height: 1.2;
}
.trade-item .direction {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  color: #4caf50;
}
.trade-item .direction.sell {
  color: #ef5350;
}
.trade-item .price {
  color: #fff;
  font-size: 12px;
  font-family: monospace;
  font-weight: 400;
}
.trade-item .amount {
  font-size: 12px;
  text-align: center;
  font-family: monospace;
  line-height: 1.2;
}
.price {
  color: #fff;
}
.amount {
  color: #fff;
}
.trade-item > div {
  flex: 1;
  text-align: center;
}

.direction {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
}

.direction.buy {
  color: #4caf50;
}

.direction.sell {
  color: #ef5350;
}

.trade-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: #1a1c2a;
  z-index: 10;
  box-shadow: 0 -2px 10px #0000001a;
}
.chart-container {
  margin: 15px;
  background: #1a1c2a;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  height: 300px;
  -webkit-user-select: none;
  user-select: none;
}
.price-labels {
  position: absolute;
  top: 4px;
  left: 4px;
  display: flex;
  gap: 8px;
  z-index: 5;
  font-size: 11px;
  font-family: monospace;
  background: rgba(26, 28, 42, 0.9);
  padding: 2px 6px;
  border-radius: 2px;
  max-width: calc(100% - 60px);
  white-space: nowrap;
  overflow: hidden;
}
.price-label {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 50px;
}
.price-label .label {
  color: #999;
}
.price-label .value {
  color: #4caf50;
}
.button-container {
  display: flex;
  gap: 8px;
}

.buy-button,
.sell-button {
  flex: 1;
  height: 44px;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.buy-button {
  background: #4caf50;
}

.sell-button {
  background: #ff3b30;
}
.symbol-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #333;
  color: #fff;
}
.close-btn {
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0 10px;
}
.symbol-content {
  width: 100%;
  max-width: 300px;
  background: #1a1a1a;
  height: 100%;
  animation: slideIn-12f42a9c 0.3s;
}
.symbol-list {
  overflow-y: auto;
  height: calc(100% - 100px);
}
.symbol-item {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  cursor: pointer;
  border-bottom: 1px solid #2d2d2d;
}
.symbol-name {
  color: #fff;
  font-size: 14px;
}
.symbol-price {
  font-size: 14px;
}
.symbol-price.up {
  color: #4caf50;
}
.symbol-price.down {
  color: #ef5350;
}
.trade-content {
  width: 100%;
  background: #1a1a1a;
  border-radius: 20px 20px 0 0;
  padding: 20px;
  animation: slideUp-12f42a9c 0.3s;
  box-sizing: border-box;
}
.product-info {
  margin-bottom: 20px;
}
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}
.info-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.info-item .label {
  color: #999;
  font-size: 14px;
}
.info-item .value {
  color: #fff;
  font-size: 14px;
}
.info-item  .direction-up {
  color: #4caf50;
  font-weight: 500;
}
.info-item  .direction-down {
  color: #ef5350;
  font-weight: 500;
}
.trade-time {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 5px;
}
.time-label {
  color: #999;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.info-icon {
  background: #4254ef;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 12px;
  cursor: pointer;
  position: relative;
}
.info-icon:before {
  content: "i";
  color: #fff;
}
.time-options {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.time-option {
  flex: 0 0 calc(33.33% - 7px);
  background: #2d2d2d;
  padding: 15px 10px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  color: #fff;
  transition: all .3s; 
  box-sizing: border-box;

}
.time-option.active {
  background: #4254ef;
}
.time-option .time {
  font-size: 16px;
  margin-bottom: 5px;
  color: #fff;
}
.ratio {
  font-size: 14px;
  color: #4caf50;
}
.balance-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 14px;
  color: #999;
  padding: 0 5px;
}
.currency-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  margin-left: 4px;
  vertical-align: middle;
}
.predicted {
}
.amount-input {
  position: relative;
  margin-bottom: 20px;
}
.input-wrapper {
  position: relative;
  margin-bottom: 20px;
}
.trade-input {
  width: 100%;
  height: 50px;
  background: #2d2d2d;
  border: none;
  border-radius: 25px;
  color: #fff;
  font-size: 18px;
  padding: 0 120px 0 25px;
  outline: none;
  box-sizing: border-box;
}
.min-amount {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 14px;
  white-space: nowrap;
}
.confirm-btn {
  width: 100%;
  height: 50px;
  background: #4254ef;
  color: #fff;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.3s;
}
</style>
